<template>
	<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
	 
	 <!-- v2父容器  子view使用绝对布局 -->
	 <view class="" style="	display: flex; justify-content: center; align-items: center;position: relative;width: 100%;">
	 	<image src="http://120.234.27.130:9010/uploads/images/ddc.png" mode="aspectFit"
	 	style=""></image>
	 </view>
	   <view class="v2">
		   <view class="" style="display: flex;width: 100%;padding: 0 40rpx;box-sizing: border-box;">
			   <view class="" style="width:10%;height: 60rpx;border-bottom: 1rpx solid #d1d1d1;margin: auto;">
			   	
			   </view>
		   	<view class="dltext" style="">登录</view>
			<view class="" style="width:70%;height: 60rpx;border-bottom: 1rpx solid #d1d1d1;margin: auto;">
				
			</view>
		   </view>
	  
	     <!-- 手机号 -->
	     <view class="phoneCs">
	       <!-- <image src="../../static/logo.png" class="ph"></image> -->
		   <i class="iconfont ph" style="font-size: 60rpx;color: gray;">&#xe624;</i>
	       <input placeholder="请输入账号" type="number" v-model="username"/>
	     </view>
	     <!-- 密码 -->
	     <view class="phoneCs" style="margin-top: 150rpx;">
	       <i class="iconfont ph" style="font-size: 50rpx;color: gray;">&#xe65d;</i>
	       <input placeholder="请输入密码" type="password" v-model="password" />
	     </view>
	     <!-- 登录按钮 -->
	     <view class="denglu">
	       <button class="btn-dl" type="primary" @click="login">登录</button>
	       <view class="register" @click="tiyan">
	         我要体验
			</view>
	     </view>
	   </view>
	 </view>
	  
	
	  

	  

	  
	
	  

</template>

<script>
	import navbarVue from '../../components/navbar.vue'
	export default {
		 components: {
		    navbarVue
		  },
		data() {
			return {

				 username: '',
				 password: '',
				clientHeight:''
			}
		},
		 onLoad(){
		    // var that=this
		    wx.getSystemInfo({ 
		      success: function (res) { 
		        console.log(res.windowHeight)
		        this.clientHeight=res.windowHeight
		      } 
		    }) 
		  },
		methods: {
			tiyan(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			 login(){
				 console.log(this.username,this.password);
			    if(this.username==''){
			      uni.showToast({
			        icon:'none',
			        title: '账号不能为空',
			      })
				  return
			    }
				
				if(this.password==''){
			      uni.showToast({
			        icon:'none',
			        title: '密码不能为空',
			      })
				  return 
			    }
				
				uni.reLaunch({
					url:'/pages/index/index'
				})
				
			  },
	    }
	}
</script>

<style lang="scss" scoped>
/* pages/login/login.wxss *//* 最大的父元素 */
.v1{
  display: block;
  position:absolute;
  width: 100%;
  background-color: white;
}
/* 白色区域 */
.v1 .v2{
  // margin-top: 150rpx;
  box-sizing: border-box;
  left: 50rpx; 
  width: 100%;
  height: 600rpx;
  background-color: white;
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
  margin: 50rpx 20rpx 0 50rpx;
  // position: absolute;
  // margin-left:50rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
	margin-top: 30rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  box-sizing: border-box;
  width:90% ;
  height: 90rpx ;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;
  
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 45rpx;
  height: 45rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
  margin-top: 150rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:90% ;
  height: 90rpx ;
  border-radius: 50rpx;
  background-color: rgb(250, 248, 248);

}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 50rpx;
  height: 50rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
  margin-top: 10rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
  width: 80%;
  height: 80rpx;
  position: absolute;
  margin-top:515rpx;
  margin-left: 10%;  
}
/* 登录按钮 */
.v1 .v2 .denglu button{
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 50rpx;
}
.register{
  width: 100%;
  text-align: center;
  margin: 10rpx 0;
  color: rgb(84, 206, 247);
}


</style>
